<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>地址选择组件</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../static/layuiadmin/style/admin.css" media="all">
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space20">
			<div class="layui-col-md3"></div>
			<div class="layui-col-md6">
				<blockquote class="layui-elem-quote" style="margin-top: 100px;">地址选择插件</blockquote>
				<!-- 地址选择插件 start -->
				<form class="layui-form">
					<div class="layui-row">
						<div class="layui-col-sm4">
							<div class="layui-inline layui-select-default" style="width: 99%;">
								<select name="province" data-area="广东省" lay-filter="province">
									<option value="">选择省</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-sm4">
							<div class="layui-inline layui-select-default" style="width: 99%;">
								<select name="city" data-area="广州市" lay-filter="city">
									<option value="">选择市</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-sm4">
							<div class="layui-inline layui-select-default" style="width: 99%;">
								<select name="district" data-area="天河区" lay-filter="district">
									<option value="">选择区</option>
								</select> 
							</div>
						</div>
					</div>
					<p style="margin-top: 40px;"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button></p>
				</form>
				<!-- 地址选择插件 end -->
			</div>
			<div class="layui-col-md3"></div>
		</div>
	</div>
<script src="../../static/js/zoneCommonJs/jquery.min.js"></script>
<script src="../../static/layuiadmin/layui/layui.js"></script>
<script src="../../static/js/zoneCommonJs/city-picker.js"></script>
<script src="../../static/layuiadmin/common.js"></script>
<script type="text/javascript">
		//config的设置是全局的
		layui.config({
			base: '../../static/layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['form',"common"], function(){
			var	form = layui.form;
			var	common = layui.common;
			//do something...
			//三级地址联动
			common.showCity('province', 'city', 'district');

			//监听提交
			form.on('submit(formDemo)', function(data){
				var resData = data.field,
					province = resData.province,
					city = resData.city,
					district = resData.district;

				console.log(province, city, district)

				// 通过地址code码获取地址名称
				var address = common.getCity({
					province, 
					city,
					district
				});
				console.log(address);
				return false;
			});
			
		});
	</script>
</body>
</html>